<template>
  <div :class="$style.ziMainQww">
    <div class="line-h-1-6 pb-30">
      <h1>表格高度自适应</h1>
      <p>说明： 改变高度或者改变宽度导致盖度变化表格都会自适应</p>
      <p class="text-d-lt color-light-gray">占位置用的文字 占位置用的文字占位置用的文字占位置用的文字占位置用的文字占位置用的文字占位置用的文字占位置用的文字占位置用的文字占位置用的文字占位置用的文字占位置用的文字占位置用的文字占位置用的文字占位置用的文字占位置用的文字占位置用的文字占位置用的文字占位置用的文字</p>
    </div>

    <div :class="$style.content">
      <el-table :data="tableData" border stripe highlight-current-row height="100%">
        <el-table-column prop="date" label="Date" />
        <el-table-column prop="name" label="Name"/>
        <el-table-column prop="address" label="Address"/>
      </el-table>
    </div>
    <div class="pt-20">
      <el-button type="primary" style="width: 100%">按钮</el-button>
    </div>
  </div>
</template>

<script>

import { defineComponent, reactive } from 'vue'

export default defineComponent({

  setup () {
    const tableData = reactive([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-08',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-06',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-07',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-08',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-09',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-10',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-11',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-12',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-13',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      }
    ])

    return {
      tableData
    }
  }

})

</script>

<style module lang="less">
.zi-main {
  &__qww {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}
.content {
  flex-grow: 1;
  overflow: auto;
}

:global .asd {
  list-style: none;
}
</style>
